<template>
  <div>
  <div class="header">
    <img src="../img/left.png" @click="back">
    <h4>首页</h4>
  </div>
  <div>
    <div class="button" flag="credit" @click="listShow(1)">
      贷款申请
    </div>
    <div class="hide" flagFor="credit" v-show="creShow" >
      <li><router-link to="/applicationList">吾乐贷</router-link></li>
      <li><router-link to="/cardList">信用卡</router-link></li>
      <li><router-link to="/myLoad">申请列表</router-link></li>
    </div>
    <div class="button" flag="person" @click="listShow(2)">
      个人中心
    </div>
    <div class="hide" flagFor="person" v-show="perShow">
      <li><router-link to="/add">新增贷款产品</router-link></li>
      <li><router-link to="/promote">我要推广</router-link></li>
      <li><router-link to="/commission">我的佣金</router-link></li>
      <li><router-link to="/accountInfo">账户信息</router-link></li>
      <li><router-link to="/settleInfo">结算信息</router-link></li>
      <li><router-link to="/adress">我的面签地址</router-link></li>
    </div>
    <div class="button">
      使用帮助
    </div>
  </div>
  </div>
</template>
<script>
    export default {
      data() {
        return {
          creShow: false,
          perShow: false
        }
      },
      methods: {
        back(){
          this.goback()
        },
        listShow(e) {
          e==1?(this.creShow=true,this.perShow=false):(this.perShow=true,this.creShow=false)
        }
      }
    }
</script>
<style>
  .button{
    margin-top: 20px;
  }
  .hide{
    /*display: none;*/
  }
  li{
    height: 44px;
    line-height: 44px;
    margin-right: 10%;
    margin-left: 10%;
    list-style: none;
    border-bottom: 1px solid #E9E9E9;
  }
  a{
    color: #000000;
    text-decoration: none;
  }
  a:visited{
    color: #000000;
  }
</style>
